<template>
<div>

  <div class="chain-link-bar-wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>商铺管理</el-breadcrumb-item>
      <el-breadcrumb-item to="/product">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/product/detail/' + productId">详情：{{product.product_name}}</el-breadcrumb-item>
    </el-breadcrumb>  
  </div>

  <el-card class="box-card">
    
    <div slot="header" class="clearfix">
      <h3 class="app-h3 app-margin-v-0">
        商品详情
      </h3>
    </div>

    <div class="app-diliver-10"></div>
    
    <el-row :gutter="80">
      <el-col :span="12">
        
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">商品信息</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          
          <el-col :span="3">
            <span class="app-label">商品名称：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.product_name}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">商品类型：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.product_type}}&nbsp;</span>
          </el-col>
          
          <el-col :span="3">
            <span class="app-label">是否推荐：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.recommend}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">上下架状态：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.put_away}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">商城分类：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.product_mall_type}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">销量：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">
              {{product.sales}}&nbsp;
            </span>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">商品图片</h4>
          </el-col>
        </el-row>
        <div class="app-diliver-10"></div>
        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">封面图片：</span>
          </el-col>
          <el-col :span="20">
            <el-image class="section-img-200" v-if="product.product_pic != null" v-for="img in product.product_pic" :preview-src-list="product.product_pic"  :src="img" />
          </el-col>
        </el-row>
        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">详情图片：</span>
          </el-col>
          <el-col :span="20">
            <el-image class="section-img-200" :preview-src-list="product.product_detail_pic" v-for="img in product.product_detail_pic" :src="img" />
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">审核状态</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>
        
        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">状态：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">
              <el-button v-if="product.audit_status == 0"  size="mini">未审核</el-button>
              <el-button v-if="product.audit_status == 1" type="success"  size="mini">已通过</el-button>
              <el-button v-if="product.audit_status == 2" type="danger"  size="mini">未通过</el-button>&nbsp;
            </span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">审核说明：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.audit_status_explain}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">审核时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.audit_date_time}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">发布时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.indate}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">更新时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{product.modified_time}}&nbsp;</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-b-0">商品规格</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>
        
        <el-row class="app-section">
          <el-table :data="product.product_spec" border  style="width: 100%" class="nc-table-btn-ctrl">
            <el-table-column type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column
                    label="规格名称"
                    width="200">
              <template slot-scope="scope">
                <span>{{scope.row.specification}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="库存"
                    width="100">
              <template slot-scope="scope">
                <span>{{scope.row.current_cnt}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="帝全会员价"
                    width="100">
              <template slot-scope="scope">
                <span>{{scope.row.price/100}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="市场价"
                    width="100">
              <template slot-scope="scope">
                <span>{{scope.row.bazaar_price/100}}</span>
              </template>
            </el-table-column>
            <el-table-column label="规格图片">
              <template slot-scope="scope">
                <el-image style="width: 100px; max-height: 100px; margin: 5px;" :preview-src-list="scope.row.specification_pic" v-if="scope.row.specification_pic != null" v-for="authImage in scope.row.specification_pic" :src="authImage" />
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-b-0">个人信息 & 公司信息</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">发布人：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.last_name + account.first_name}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">手机号：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.phone}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">公司名称：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.name}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">公司座机：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.company_tel == '' ? "暂无座机" : company.company_tel}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">公司地址：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">
              {{company.address_detail}}&nbsp;
            </span>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
    
    

  </el-card>

  <!--<CheckStatusEdit :is-show="checkStatusEditVisible" :activity-obj="editProduct" :check-yes="checkYes"></CheckStatusEdit>-->
</div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'

  import Api from '../../api/Api'
  import ProductApi from '../../api/ProductApi'
  import CheckStatusEdit from './CheckStatusEditDialog';
  import JsonKit from "~/kit/JsonKit";
  import Store from "~/store";



  export default {
  	components: {
  		NcButton,
        SubmitButton,
        CheckStatusEdit
  	},
  	data(){
  	  return {
        product: {},
        productId: 0,
        checkStatusEditVisible: false,
        checkYes: 0,
        editProduct: {},
        account: {},
        company: {},
  	  }
  	},
  	computed: {
  	  
  	},
  	created(){
  	  this.productId = this.$route.params.productId;
      this.getProduct();
      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
      this.role = Store.state.user.role;
  	},
    beforeDestroy: function() {
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
    watch: {
      '$route' (to, from) {
        this.productId = to.params.productId;
        this.getProduct();
      }
    },
  	methods: {
      getProduct(){
        ProductApi.detail(this.productId, json => {
          this.product = json.product;
          this.account = json.product.account;
          this.company = json.product.company;
        });
      },
      indexMethod(index) {
        return index + 1;
      },
      checkStatusHandle(productId, checkYes) {
        this.editProduct = this.product;
        this.checkYes = checkYes;
        this.checkStatusEditVisible = true;
      },
      hideEditDialog(isSuccess) {
        this.checkStatusEditVisible = false;
        this.editProduct = {};
        if (isSuccess) {
          this.getProduct();
        }
      }
  	}
  }
</script>

